<template>
  <div class="goods-info-form">
    <!-- <h1>这里是商品信息组件</h1> -->
    <el-form
      :model="goodsInfo"
      :rules="goodsRules"
      ref="goodsInfoForm"
      label-width="100px"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="商品分类" prop="productCategoryId">
        <el-cascader
          v-model="goodsInfo.productCategoryId"
          :options="categoryList"
          :props="categoryProp"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="goodsInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="副标题" prop="subTitle">
        <el-input v-model="goodsInfo.subTitle"></el-input>
      </el-form-item>

      <el-form-item label="商品品牌" prop="brandId">
        <el-select v-model="goodsInfo.brandId" placeholder="请选择">
          <el-option
            v-for="(item, index) in brandList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品介绍" prop="description">
        <el-input type="textarea" v-model="goodsInfo.description"></el-input>
      </el-form-item>
      <el-form-item label="商品货号" prop="productSn">
        <el-input v-model="goodsInfo.productSn"></el-input>
      </el-form-item>
      <el-form-item label="商品售价" prop="price">
        <el-input v-model="goodsInfo.price"></el-input>
      </el-form-item>
      <el-form-item label="市场价格" prop="originalPrice">
        <el-input v-model="goodsInfo.originalPrice"></el-input>
      </el-form-item>
      <el-form-item label="商品库存" prop="stock">
        <el-input v-model="goodsInfo.stock"></el-input>
      </el-form-item>
      <el-form-item label="计量单位" prop="unit">
        <el-input v-model="goodsInfo.unit"></el-input>
      </el-form-item>
      <el-form-item label="商品重量" prop="weight">
        <el-col :span="19">
          <el-input v-model="goodsInfo.weight"></el-input>
        </el-col>
        <el-col :span="3" :offset="2">
          <span>克</span>
        </el-col>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="goodsInfo.sort"></el-input>
      </el-form-item>
      <el-form-item>
        <el-col :span="8" :offset="8">
          <el-button type="primary" @click="submitForm"
          >下一步,填写商品促销</el-button>
        </el-col>       
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getCategoryList, getBrandList } from "../../api";
import {minAndMaxLenght} from '../../utils/rules'

export default {
  name: "GoodsInfoForm",
  props:{
    goodsInfo:Object
  },
  data() {
    return {
      goodsRules: {
        productCategoryId:[
          {required:true,message:"该值不能为空",trigger:"blur"}
        ],
        name:[
          {required:true,message:"名称必须填写",trigger:"blur"},
          // {min:2,message:"长度不能小于2",trigger:"blur"},
          {pattern:/^[\u4e00-\u9fa5]+$/,message:"只能输入中文字符",trigger:"blur"},
          {validator:minAndMaxLenght,trigger:"blur"}
        ],
        subTitle:[
          {required:true,message:"必须填写",trigger:"blur"},
        ],
        brandId:[
          {required:true,message:"必须填写",trigger:"blur"},
        ]
      },
      categoryList: [],
      categoryProp: {
        label: "name",
        value: "id",
        emitPath: false,
      },
      brandList: [],
    };
  },
  created() {
    getCategoryList().then((res) => {
      this.categoryList = res.data.data;
    });
    getBrandList().then((res) => {
      this.brandList = res.data.data;
    });
  },
  methods:{
    submitForm(){
      this.$refs.goodsInfoForm.validate((valid) => {
          if (valid) {
            this.$emit('nextPage')
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    }
  }

};
</script>

<style scoped lang="less">
  .goods-info-form{
    margin-top: 50px;
  }
</style>